<script lang="ts" setup>
import {
    Check,
    Delete,
    Edit
} from '@element-plus/icons-vue'

import { reactive } from 'vue'
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { fa } from 'element-plus/es/locale'
import request from "../../utils/request"
import { ElMessage } from "element-plus";

//初始化数据
onMounted(() => {
    arr()
})

//查询所有数据
function arr() {
    request.get("/api/girl/arr").then((re) => {
        studentSelect.value = re.data
    })
}

//初始数据
const studentSelect = ref([{
    id: '',
    name: '盘',
    // 专业
    classs: '计算机',
    //时间
    enrollmentTime: '2024-05-09',
    bunkhouseName: '4101',
    sex: '女'
}])

//查询
//名字或宿舍查询变量
const formInline = ref({
    name: '',
    bunkhouseName: ''
})

//根据名字查询
function onSubmitName() {
    request.get("/api/girl/onSubmitName?name=" + formInline.value.name).then((re) => {
        //查不到数据时提示没有数据
        if (re.data.length == 0) {
            ElMessage.error("没有改学生")
        } else {
            studentSelect.value = re.data
        }
    })
}

//根据宿舍号查询
function onSubmitBunkhouseName() {
    request.get("/api/girl/onSubmitBunkhouseName?bunkhouseName=" + formInline.value.bunkhouseName).then((re) => {
        //查不到数据时提示没有数据
        if (re.data.length == 0) {
            ElMessage.error("没有该宿舍")
        } else {
            studentSelect.value = re.data
        }
    })
}

//顶栏重置按钮，重置搜索框还有初始化数据
function inception() {
    formInline.value = {
        name: '',
        bunkhouseName: ''
    }
    arr()
}




//crud模型
const studentIUD = ref({
    id: '',
    name: '',
    // 专业
    classs: '',
    //时间
    enrollmentTime: '',
    bunkhouseName: '',
    sex: '女'
})

//清空填写模型
function cler() {
    studentIUD.value = {
        id: '',
        name: '',
        // 专业
        classs: '',
        //时间
        enrollmentTime: '',
        bunkhouseName: '',
        sex: '女'
    }
}

//添加
//控制添加
const dialogVisible = ref(false)

function insertT() {
    //清空模型数据
    cler()
    //打开弹框
    dialogVisible.value = true
}

//点击确认后添加，把模型数据清空
function insertVerify() {
    request.post("/api/girl/insertVerify", studentIUD.value).then((re) => {
        if(re.data=="内容不能有空"){
            ElMessage.error("内容不能有空")
        }else{
           //成功清空模型数据，刷新页面数据
        arr()
        //关闭弹窗
        dialogVisible.value = false
        cler() 
        }
    })
}


//修改
//修改弹框
const updateT = ref(false)
//修改数据，根据id查询赋值
function updateById(id) {
    request.get("/api/girl/updateById?id=" + id).then((re) => {
        studentIUD.value = re.data
        //打开修改弹窗
        updateT.value = true

    })
}

//点击确认后根据数据模型的进行修改
//为什么最后没有对数据模型进行清理？每一次进来就会查询新的数据，或者清理数据（添加）所以不用清空
//为什么不用参数？走到这里已经带着实时的数据在studentIUD里了
function updateStudent() {
    request.put("/api/girl/updateStudent", studentIUD.value).then((re) => {
        if(re.data=="内容不能有空"){
            ElMessage.error("内容不能有空")
        }else{
         //更新实时数据
         arr()
        //关闭弹框
        updateT.value = false
        //还是清空吧
        cler()
        }
    })
}


//删除
//删除的弹框
const deleteT = ref(false)

//存储是否删除的id
const deleteId = ref('0')
//删除按钮逻辑
function studentDelete(id) {
    //带着id带提示框，要是确认就根据id删除
    deleteId.value = id

    //打开提示弹框
    deleteT.value = true
}

//是否确认删除
function studentDeleteD() {
    //确认发送删除请求
    request.get("/api/girl/studentDeleteD?id=" + deleteId.value).then((re) => {
        ElMessage.success("删除成功")
        //删除后查询所有更新列表
        arr()
        //确认删除后不用把deleteId清空，下次又是新的赋值
        //关闭弹框
        deleteT.value = false
    })

}

</script>

<template>

    <el-card>
        <div class="card-header">
            <span> 女生宿舍</span>
            <el-button plain @click="insertT" type="primary">
                添加
            </el-button>


        </div>

        <div style="margin-top: 20px;">
            <hr>
        </div>

        <!--  -->

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="formInline.name" placeholder="请输入要查询的名字" clearable />
            </el-form-item>
            <el-form-item>
                <el-button class="osp" type="primary" @click="onSubmitName">搜索</el-button>
            </el-form-item>


            <el-form-item label="">
                <el-input v-model="formInline.bunkhouseName" placeholder="请输入要查询的宿舍" clearable />
            </el-form-item>
            <el-form-item>
                <el-button class="osp" type="primary" @click="onSubmitBunkhouseName">搜索</el-button>
            </el-form-item>


            <el-form-item>
                <el-button type="default" @click="inception">重置</el-button>
            </el-form-item>
        </el-form>

        <el-scrollbar height="580px">
            <el-table :data="studentSelect" height="580" style="width: 100%">
                <el-table-column prop="bunkhouseName" label="宿舍" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="sex" label="性别" />
                <el-table-column prop="enrollmentTime" label="入学时间" />
                <el-table-column label="操作" width="180">
                    <template v-slot="scope">
                        <div>
                            <!-- 修改 -->
                            <el-button type="primary" @click="updateById(scope.row.id)" :icon="Edit" circle />
                            <!-- 删除 -->
                            <el-button type="danger" @click="studentDelete(scope.row.id)" :icon="Delete" circle />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>




    </el-card>
    <!-- 添加弹框 -->
    <!-- 开关dialogVisible -->
    <el-dialog v-model="dialogVisible" title="添加" width="500">
        <!-- 内容 -->
        <span>
            <!-- 弹框添加 -->
            <el-form :model="studentIUD" label-width="auto" style="max-width: 600px">
                <!-- 名字 -->
                <el-form-item label="名字">
                    <el-input v-model="studentIUD.name" />
                </el-form-item>
                <!-- 宿舍名 -->
                <el-form-item label="宿舍名">
                    <el-input v-model="studentIUD.bunkhouseName" />
                </el-form-item>
                <!-- 性别锁死 -->
                <!-- 入学时间 -->
                <div class="demo-date-picker">
                    <div class="block">
                        <span class="demonstration">入学时间</span>
                        <div class="demonstration">日期：{{ studentIUD.enrollmentTime }}</div>
                        <el-date-picker v-model="studentIUD.enrollmentTime" type="date" placeholder="年-月-日"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </div>
                </div>
            </el-form>
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="insertVerify">
                    确认
                </el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog v-model="updateT" title="修改" width="500">
        <!-- 内容 -->
        <span>
            <!-- 弹框添加 -->

            <el-form :model="studentIUD" label-width="auto" style="max-width: 600px">
                <!-- 名字 -->
                <el-form-item label="名字">
                    <el-input v-model="studentIUD.name" />
                </el-form-item>
                <!-- 宿舍名 -->
                <el-form-item label="宿舍名">
                    <el-input v-model="studentIUD.bunkhouseName" />
                </el-form-item>
                <!-- 性别锁死 -->
                <!-- 入学时间 -->
                <div class="demo-date-picker">
                    <div class="block">
                        <span class="demonstration">入学时间</span>
                        <div class="demonstration">日期：{{ studentIUD.enrollmentTime }}</div>
                        <el-date-picker v-model="studentIUD.enrollmentTime" type="date" placeholder="年-月-日"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </div>
                </div>
            </el-form>
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="updateStudent">
                    确认
                </el-button>
                <el-button @click="updateT = false">取消</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 删除提示 -->
    <el-dialog v-model="deleteT" title="删除" width="500">
        <span>确定要删除吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="studentDeleteD">
                    确定
                </el-button>
                <el-button @click="deleteT = false">取消</el-button>

            </div>
        </template>
    </el-dialog>


</template>

<style setup>
.card-header {
    display: flex;
    justify-content: space-between;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

/* 日期 */
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>